<template>
	<view class="info-card">
		<image class="card-img" :src="cardImg" mode=""></image>
		<view class="card-msg">
			<!-- <p class="msg-title">{{restMsg.restName}}</p>
			<uni-icons type="star-filled" color="#F8621E"></uni-icons>
			<text class="msg-grade">{{restMsg.gradeNum}}</text>
			<text class="msg-comment">{{restMsg.comment}}人已评价</text> -->
			<text class="msg-title">{{restName}}</text>
			<!-- <view class="msg-location" @click="showLocation">
=======
			<text class="msg-title" @click="showDetails">{{restName}}</text>
			<view class="msg-location" @click="showLocation">
>>>>>>> hui
				<uni-icons type="location-filled" size="15" color="#5a5a5a"></uni-icons>
				<text>查看位置</text>
			</view> -->
			<view class="msg-comment">
				<view class="comment-grade" v-for="(item, index) in gradeNum" :key="index">
					<uni-icons type="star-filled" size="13" color="#F8621E"></uni-icons>
				</view>
				<text class="grade-num">{{gradeNum}}分</text>

			</view>
			<text class="comment-count">{{commentCount}}人已评价</text>
		</view>
	</view>
</template>

<script>
	import helper from "../common/helper.js"
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	export default {
		components: {
			uniIcons
		},
		name: "infoCard",
		props: {
			cardImg: String,
			restName: String,
			gradeNum: {
				type: Number,
				value: 5
			},
			commentCount: {
				type: Number,
				value: 0
			}
		},
		data(){
			return{
				name:""
			}
		},
		onLoad()
		{
			helper.name;
		},
		methods: {

			// showLocation() {
			// 	uni.navigateTo({
			// 	    // url: '../home/restLocation'
			// 	})
			// }

			showLocation() {
				uni.navigateTo({					
					//url:"../restLocation/restLocation"
				})
			},
			showDetails(){
				uni.navigateTo({
					//url:'./home/restDetails'
				})
			},
			
		}
	}
</script>

<style scoped lang="less">
	.info-card {
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 180upx;
		padding: 15upx;
		margin-bottom: 10upx;
		background-color: #FFFFFF;

		// border: 1px solid red;
		.card-img {
			display: block;
			width: 140upx;
			height: 140upx;
			padding-left: 10upx;
			padding-right: 10upx;
		}

		.card-msg {
			box-sizing: border-box;
			height: 100%;
			width: auto;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			// border: 1px solid red;
			padding: 10upx;

			.msg-title {
				font: normal bold 34upx/34upx "思源黑体";
				color: #333333;
			}

			// .msg-location {
			// 	display: flex;
			// 	flex-direction: row;
			// 	margin-top: 25upx;
			// 	font: normal 30upx/30upx "思源黑体";
			// 	color: #5B5B5B;
			// }
			.msg-comment {
				display: flex;
				flex-direction: row;
				align-items: flex-end;

				.comment-grade {
					margin-right: 5upx;
					// border: 1px solid red;
				}

				.grade-num {
					font: normal 28upx/38upx Arial, Verdana, Sans-serif;
					color: #5B5B5B;
				}
			}

			.comment-count {
				font: normal 28upx/28upx Arial, Verdana, Sans-serif;
				color: #5B5B5B;
				// margin-left: 24upx;
				// border: 1px solid red;
			}
		}
	}
</style>
